@import "../../style/constant.scss";

.at-calendar {
  overflow: hidden;

  /* elements */
  &__header {
    .header__flex {
      display: flex;
      align-items: center;
      color: #8C8C8C;
      text-align: center;
      padding: 8px 7px 8px;

      &-showLine {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
      }

      &-item {
        flex: 0 0 calc(100% / 7);
        font-size: 12px;
        line-height: 17px;
      }
    }

    .header__line {
      margin: 0 7px 2px;
      height: 1px;
      background-color: rgba(232, 232, 232, 0.4);
    }
  }

  &__list {
    &.flex {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      color: #7C86A2;
      padding: 0 7px;

      .flex__item {
        width: calc(100% / 7);
        font-size: 15px;
        height: 40px;
        padding-top: 4px;
        text-align: center;
        position: relative;
        color: #333;

        &-container {
          position: relative;
          align-items: center;
          display: flex;
          width: 27px;
          height: 27px;
          margin-left: auto;
          margin-right: auto;
          border-radius: 50%;
          &__mark {
            background-color: rgba(150, 228, 192, 0.2000);
          }
          .container-text {
            flex: 1;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            line-height: 18px;
          }
        }

        .markText {
          font-size: 12px;
          line-height: 17px;
          display: flex;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
          text-align: center;
          color: #47C690;

          &_grey {
            color: #C2C2C2;
          }
        }

        &-icon {
          position: absolute;
          top: 3px;
          right: 0;
          width: 12px;
          height: 12px;
        }

        &-extra {
          width: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-self: center;
        }

        &--blur {
          color: #C2C2C2;
        }

        &--pre {
          opacity: 0;
        }

        &--next {
          opacity: 0;
        }

        &--mark {
          height: 50px;
        }

        &--selected {
          color: white;

          .flex__item-container {
            background-color: #47C690;
          }

        }
      }
    }
  }

  &__controller {
    display: flex;
    align-items: center;
    height: 46px;
    justify-content: space-between;
    @include border(bottom, 1px, solid, $borderLineColor);

    .controller__arrow {
      width: 20px;
      height: 20px;
      opacity: 0.6;

      &_btn {
        display: flex;
        align-items: center;
        @include tabActive;
        padding: 0 14px;
        width: 48px;
        height: 100%;
      }

      &--left {
        transform: rotate(180deg);
      }

      &--disabled {
        opacity: 0.2;
      }
    }

    .controller__info {
      flex: 0 0 auto;
      color: #595959;
      font-weight: 500;
      font-family: PingFangSC-Medium;
      font-size: 15px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}

.at-calendar-slider__main {
  .main__body {
    display: flex;
    width: 100%;
    height: 240px;

    &--row4 {
      height: 160px;
    }

    &--row5 {
      height: 200px;
    }

    &--row6 {
      height: 240px;
    }

    &--mark {
      &--row4 {
        height: 200px;
      }

      &--row5 {
        height: 250px;
      }

      &--row6 {
        height: 300px;
      }
    }


    &--animate {
      transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    }

    .body__slider {
      flex: 0 0 100%;
    }
  }
}
